<template>
    <div class="flex justify-center p-8">
        <a-form>
            <a-form-item required label="用户订单通知">
                <a-input v-model:value="orderNotification"></a-input>
            </a-form-item>

            <div class="py-6 select-none">
                <div class="text-gray-400 mb-3">请对齐一下参数</div>
                <div>
                    <draggable :list="order" :force-fallback="true" itemKey="id" :animation="500">
                        <template #item="{ element }">
                            <div class="w-80 h-10 rounded-md border border-gray-300 px-4 flex-between mb-4">
                                <div>{{ element.label }}</div>
                                <UnorderedListOutlined class="text-gray-400" />
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>

            <a-form-item label="跑男审核通知">
                <a-input v-model:value="auditNotice"></a-input>
            </a-form-item>


            <div class="pt-6 mb-8 select-none">
                <div class="text-gray-400 mb-3">请对齐一下参数</div>
                <div>
                    <draggable :list="toExamine" :force-fallback="true" itemKey="id" :animation="500">
                        <template #item="{ element }">
                            <div class="w-80 h-10 rounded-md border border-gray-300 px-4 flex-between mb-4">
                                <div>{{ element.label }}</div>
                                <UnorderedListOutlined class="text-gray-400" />
                            </div>
                        </template>
                    </draggable>
                </div>

            </div>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { UnorderedListOutlined } from '@ant-design/icons-vue';
import draggable from 'vuedraggable'

const orderNotification = ref()
const auditNotice = ref()

const order = reactive([
    { label: '状态', id: '1' },
    { label: '订单号', id: '2' },
    { label: '服务类型(帮我送/帮我取/帮我买)', id: '3' },
    { label: '物品描述', id: '4' },
    { label: '创建时间', id: '5' },
    { label: '下单时间', id: '6' }
])

const toExamine = reactive([
    { label: '审核时间', id: '1' },
    { label: '审核结果', id: '2' },
    { label: '拒绝理由', id: '3' },
])

// 禁止用户复制文字
const handleCopy = (e: Event) => {
    e.returnValue = false
}
onMounted(() => {
    document.addEventListener('onselectstart ', handleCopy)
})
onUnmounted(() => {
    document.removeEventListener('onselectstart ', handleCopy)
})
</script>

<style scoped lang="scss">
:deep(.ant-form) {
    width: 500px;

    .ant-form-item-row {
        display: grid;
        grid: 1fr;

        .ant-form-item-label {
            text-align: left;
        }
    }
}
</style>